<template>
  <div class="menu">
    <el-menu class="el-menu-vertical-demo" :default-active="defaultActive" router>
      <MenuItem :menuItems="menus">
      </MenuItem>
    </el-menu>
  </div>
</template>

<script>
import MenuItem from "./menuItem.vue";
export default {
  props: ["menus"],
  components: {
    MenuItem
  },
  data() {
    return {
      defaultActive: this.$route.path
    };
  },
  watch: {
    $route(to) {
      this.defaultActive = to.path
    }
  },
  mounted() {
  },
};
</script>

<style>
.el-submenu__title{
  font-size: 16px;
}
.el-menu-item {
  font-size: 16px;
}
.menu {
  width: 100%;
  height: calc(100vh - 60px);
  background: rgb(255, 255, 255);
}
</style>

